<template>

  <div id="office_helper">


    <!--头部导航条-->
    <blogheader style="background-color: rebeccapurple"/>
    <el-container>
      <el-main :style="mainCss">
        <el-tabs tab-position="left" class="cardList">
          <el-tab-pane label="Office办公">
            <el-row>

              <el-button type="primary" @click="wordToPdf=true">word转PDF</el-button>
              <el-button type="success">PDF转word</el-button>
              <el-button type="info">word文档html浏览</el-button>
              <el-button type="warning">警告按钮</el-button>
              <el-button type="danger">危险按钮</el-button>
            </el-row>
          </el-tab-pane>
          <el-tab-pane label="图片处理">
            <el-button type="primary" @click="imageChange=true">图片格式转换</el-button>
            <el-button type="success">添加文字水印</el-button>
            <el-button type="info">添加图片水印</el-button>
            <el-button type="warning">图片缩放</el-button>
            <el-button type="danger">图片压缩</el-button>
          </el-tab-pane>
          <el-tab-pane label="角色管理">角色管理</el-tab-pane>
          <el-tab-pane label="定时任务补偿">定时任务补偿</el-tab-pane>
        </el-tabs>

      </el-main>
    </el-container>
    <blogfooter style="background-color: rebeccapurple"/>

    <!--各种转换的弹窗区域-->
    <el-dialog
      title="Word 转 PDF"
      :visible.sync="wordToPdf"
      width="40%"
      center>
      <el-upload
        class="upload-demo"
        :data="word_pdf"
        ref="wordToPdf"
        :action="wordToPdfUrl"
        :on-preview="handlePreviewWord"
        :before-upload="checkWord"
        :on-success="onSuccessHandler"
        :limit="1"
        :on-exceed="handleExceed"
        :file-list="toPdfList">
        <el-button size="small" type="primary">点击上传</el-button>
        <span>最大支持30M文件</span>
        <div slot="tip" class="el-upload__tip">只能上传单个word文件!文件上传后会自动转换为PDF,转换需要几秒时间,请耐心等候!</div>
      </el-upload>
      <span slot="footer" class="dialog-footer">
    <!--<el-button @click="wordToPdf = false">取 消</el-button>-->
        <!--<el-button type="primary" @click="centerDialogVisible = false">转换</el-button>-->






  </span>
    </el-dialog>
    <!-------------------图片start----------------------->
    <el-dialog
      title="图片类型转换"
      :visible.sync="imageChange"
      width="40%"
      center>

      <el-upload
        class="upload-demo"
        :action='imageChangeUrl'
        ref="imageChange"
        :on-preview="imageChangeDownload"
        :before-upload="checkImage"
        :on-success="onImageChangeHandler"
        :data="formInline"
        :auto-upload="false"
        :limit="1"
        :on-exceed="handleExceed"
        list-type="picture">
        <el-button  type="primary"  slot="trigger">选择图片</el-button>
        <el-form  style="display: inline;margin-left: 1%" :inline="true" :model="formInline" class="demo-form-inline" @submit.native.prevent>
          <!--<el-form-item label="">-->
            <!--<el-button  type="primary" slot="trigger">选择图片</el-button>-->
          <!--</el-form-item>-->
          <el-form-item >
            <el-select v-model="formInline.targetImg" placeholder="请选择要转换成得类型">
              <el-option label="Png" value="png"></el-option>
              <el-option label="Gif" value="gif"></el-option>
              <el-option label="Jpg" value="jpg"></el-option>
              <el-option label="Bmp" value="bmp"></el-option>

            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitAndChangeImage">上传转换</el-button>
          </el-form-item>
        </el-form>
        <!--<el-button size="small" type="primary">旋转图片</el-button>-->

        <div slot="tip" class="el-upload__tip">图片上传后系统会自动转换位选定得类型,请耐心稍等几秒!</div>
      </el-upload>

    </el-dialog>


  </div>


</template>

<script>
  import commonUtils from '../common/commonUtils'
  import blogheader from '../components/blogheader'
  import blogfooter from '../components/blogfooter'

  export default {
    name: 'office',
    components: {
      blogheader,
      blogfooter
    },
    data () {
      return {
        //word转pdf url
        wordToPdfUrl: 'http://localhost:9090/blog/office/upload',
        //图片格式转换 url
        imageChangeUrl:"http://localhost:9090/blog/office/imageChange",
        //下载转后的文件。  1:word 相关的,2图片相关的
        downloadUrl: 'http://localhost:9090/blog/office/download',
        loading: null,
        mainCss: {
          minHeight: '447px'
        },
        wordToPdf: false,
        word_pdf: {from: 'word', to: 'pdf'},
        toPdfList: [],
        //  图片转换有关！。
        imageChange: false,
        formInline: {
          targetImg: ''
        }

      }
    },
    methods: {
      getWindowHeight () {
        var height = document.documentElement.clientHeight
        console.log('屏幕的可用高度=》' + height)
        this.mainCss.minHeight = (height - 170) + 'px'
      },

      //--------------------------word --->   pdf-----------------------------
      handleExceed () {
        this.$message.warning('目前只支持上传单个转换!!!,请先删除/下载已经上传的文件!')
      },
      checkWord (file) {
        if (this.checkFile(file.name, ['docx', 'doc'])) {
          this.loading = commonUtils.AlertLoading('努力转换中...')
          return true
        }
        return false
      },
      onSuccessHandler (response, file, fileList) {
        if (response.code == 0) {
          commonUtils.AlertOperationSuccess('转换完成,点击文件下载!', 2000)

        } else if (response.code == -2) {
          commonUtils.AlertOperationSuccess(response.result, 2000)
          this.$refs.wordToPdf.clearFiles()

        } else {
          commonUtils.AlertOperationSuccess('服务器异常,转换失败!', 1000)
          this.$refs.wordToPdf.clearFiles()
        }
        this.loading.close()

      },

      // 点击列表下载
      handlePreviewWord (file) {
        console.log('开始下载文件')
        this.download(file.name, 'word', 'pdf',1)
        this.$refs.wordToPdf.clearFiles()

      },

      //下载文件
      download (name, from, to,type) {
        window.open(this.downloadUrl + '?downloadFileName=' + name + '&from=' + from + '&to=' + to+"&type="+type)
      },

      //------------------------end-------------------------------------
      //------------------------图片-------------------
      checkImage(file){
        if (this.checkFile(file.name, ['gif','jpg',"png","bmp"])) {
          this.loading=commonUtils.AlertLoading("努力转换中...")
          return true
        }
        return false
      },
      onImageChangeHandler(response, file, fileList) {
        if (response.code == 0) {
          commonUtils.AlertOperationSuccess('转换完成,点击文件下载!', 2000)

        } else if (response.code == -2) {
          commonUtils.AlertOperationSuccess(response.result, 2000)
          this.$refs.wordToPdf.clearFiles()

        } else {
          commonUtils.AlertOperationSuccess('服务器异常,转换失败!', 1000)
          this.$refs.wordToPdf.clearFiles()
        }
        this.loading.close()
      },
      imageChangeDownload(file){
        console.log('开始下载文件')
        this.download(file.name, '', this.formInline.targetImg,2)
        this.formInline.targetImg = ''  //将类型置为''.
        this.$refs.imageChange.clearFiles()
      },
      //上传图片并转换
      submitAndChangeImage(){

        if (!this.formInline.targetImg) {
          commonUtils.AlertOperationSuccess('请选择要转换成的格式!', 2000)
          console.log("没有选择要转换的格式!")
          return;
        }
        this.$refs.imageChange.submit();

      },

      //------end--------------


      //文件后扩展名检查， 可以复用。
      checkFile (fileName, target) {
        console.log('检查文件=》' + fileName)
        var index = fileName.lastIndexOf('.')
        if (index != -1) {
          var extend = fileName.substring(index + 1)
          var result = target.some(item => {
            return item == extend
          })
          if (result) {
            return true
          } else {

            commonUtils.AlertOperationSuccess('上传的文件格式只能是' + target, 1000)
            return false
          }
        }
        commonUtils.AlertOperationSuccess('上传的文件格式不正确!', 1000)
        return false
      }
    },
    mounted () {
      this.getWindowHeight()
    }
  }
</script>

<style scoped>

  #office_helper {

    width: 100%;
    height: 100%;
    background-color: #d2dbe3;

  }

  /*-------页面整体布局----------*/

  .el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    /*line-height: 900px;*/
  }

  .cardList {
    width: 100%;
    height: 100%;
  }

</style>
